
<template>
  <div id="myChart" ref='mychart'></div>
</template>
 
<script>
import { queryLineChart } from "@/network/home";

export default {
  name: "App",
  data() {
    return {
      mychartData: {}, //echarts所需要的数据
      xAxisData:[],
    };
  },
  mounted() {
    this.queryLineChart();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.mychart);
      // 绘制图表
      myChart.setOption({
        // 设置两条线的颜色
        color:["#00f2f1","#ed3f35","#8B78F6"],
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            // 如果series里面的对象有name属性，legend可以不用写data
            // data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
            textStyle:{
                color:"#4c9bfb"
            },
            right:"10%"
        },
        grid: {
            top:"10%",
            left:"5%",
            right:"5%",
            bottom:"0%",
            show:true,//显示边框
            containLabel: true,//包含文字刻度在内
            borderColor:"#012f4a"
        },
        xAxis: {
            type: 'category',
            boundaryGap: false, //去除轴内边距
            data:this.xAxisData,
            axisTick:{
                show:false  //去除刻度线
            },
            axisLabel:{
                color:"#4c9bfb"  //刻度文本颜色
            },
            axisLine:{
                show:false//去除轴线
            },
            
        },
        yAxis: {
            type: 'value',
            axisTick:{
                show:false  //去除刻度线
            },
            axisLabel:{
                color:"#4c9bfb"  //刻度文本颜色
            },
            axisLine:{
                show:false//去除轴线
            },
            splitLine:{
                lineStyle:{
                    // color:"012f4a"
                    color:"rgba(255,255,255,0.1)"
                }
            }
        },
        series: [
            {
                name: '一等座',
                type: 'line',
                smooth:true,//线条平滑显示
                data:this.mychartData.first_price
            },
            {
                name: '二等座',
                type: 'line',
                smooth:true,//线条平滑显示
                data:this.mychartData.second_price
            },
            {
                name: '无座',
                type: 'line',
                smooth:true,//线条平滑显示
                data:this.mychartData.noseat_price
            }
        ]
      })
    },
    //处理数据供组件使用
    transformData(arr){
      let first_price = [];
      let second_price = [];
      let noseat_price = [];
      arr.forEach(item=>{
        this.xAxisData.push(item.d_time)
        first_price.push(item.first_ticket_price)
        second_price.push(item.second_ticket_price)
        noseat_price.push(item.noseat_ticket_price)
      })
      return {
        first_price,
        second_price,
        noseat_price
      }
    },
    // 发送请求，获取组件所需要的数据
    queryLineChart() {
      queryLineChart()
        .then((res) => {
          this.mychartData = this.transformData(res.data);
          console.log('折线图数据',this.mychartData);
          this.drawLine();
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style scoped>
#myChart {
  width: 900px;
  height: 350px;
  /* background-color: rgb(131, 133, 132); */
  margin: 0 auto;
}
</style>